import React, { useState } from 'react'
import { LocaleContext, locale } from '../theme-context'

function LocaleProvider(props: any) {
    const [state, setState] = useState(locale.en)
    const handleChange = () => {
        let newLocale = state === locale.cn ? locale.en : locale.cn;
        setState(newLocale)
    }
    return (
        <LocaleContext.Provider value={state} >
            <button style={{ margin: '20px' }} onClick={handleChange}>切换语言</button>
            { props.children}
        </LocaleContext.Provider>
    )
}

function LocaleButton(props: any) {
    return (
        <LocaleContext.Consumer>
            {
                locale => (
                    <div>
                        <button>{locale.submit}</button>
                        <button>{locale.cancel}</button>
                    </div>
                )
            }
        </LocaleContext.Consumer>
    )
}

const LocaleSample = () => (
    <div>
        <LocaleProvider>
            <LocaleButton />
        </LocaleProvider>
    </div>
)

export default LocaleSample;